<template>
  <div class="my-income-layout">
    <snackbar style-color="#4A4A4A"
              back-color="#ffffff"
              status-color="#ffffff"
              :fixed="true">
      <template slot="slot">
      </template>
    </snackbar>
    <div id="mycar" v-if="mycardata!=0">
    	<div class="mycar flex-col">
    	          <div class="mycar_top flex-row">
    	            <span class="info2">车牌</span>
    	            <span class="info3">桂B&nbsp;&nbsp;68686</span>
    	          </div>
    	          <div class="layer2 flex-row">
    	            <span class="word3">2021-5-31</span>
    	          </div>
    	          <div class="layer3 flex-row"><span class="info4">收入详情</span></div>
    	        </div>
    </div>
    <div class="whole" v-if="mycardata==0">
      <div class="whole-image">
        <img class="image" src="../../assets/image/marshalling.png" mode="aspectFit"></image>
      </div>
      <div class="whole-text">
        <span class="text">你未申请加盟车辆</span>
      </div>
    </div>
    <div class="bottom-layout">
      <span class="rests-btn">我的车辆</span>
      <span class="add-btn">继续申请</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'income',
    data() {
      return {
        active: null,
        mycardata:1,
      }
    }
  }
</script>

<style lang="scss" scoped>
  .whole {
  	text-align: center;
  	font-size: 16px;
  	color: #959595;
    margin-top: 200px;
    .whole-image {
      .image {
      	width: 50px;
      	height: 50px;
      }
    }
    .whole-text {
      margin-top: 20px;
    }

  }

  .my-income-layout {
    width: 100%;
    height: 100vh;
    background-color: #FFFFFF;
    .top-layout {
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 1px solid rgba(219, 219, 219, 0.5);
      width: 100vw;
      background-color: white;

      .tebs-layout {
        width: 100vw;
      }
    }

    .bottom-layout {
      position: fixed;
      bottom: 0px;
      width: 100vw;
      height: 47px;
      display: flex;
      flex-direction: row;


      .rests-btn {
        width: 121px;
        height: 47px;
        background: #FFFFFF;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-top: 1px solid rgba(221, 220, 220, 0.5);
        font-size: 14px;
        color: #3A3A3A;
      }

      .add-btn {
        flex: 1;
        height: 47px;
        background: linear-gradient(221deg, #7ED785 0%, #64C367 100%);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        font-size: 14px;
        color: #FFFFFF;
      }
    }

  }
  //

  #mycar{
  	// height: 100vh;
  	// width: 100vw;
  }
  .mycar{
  	height: 16%;
  	width: 84%;
  	border-radius: 5px;
  	border: 1px solid rgba(151, 151, 151, 1);
  	margin: 0 auto;
  	position: absolute;
  	top: 10%;
  	left: 9%;
  }
  .mycar_top{
  	font-size: 1.5em;
  	margin: 3% 0 0 3%;
  }
  .info2{
  	padding-right: 3%;
  	color: #9B9B9B;
  }
  .layer2{
  	font-size: 1.5em;
  	margin: 4% 0 0 12%;
  	padding-left: 19%;
  }
  .layer3{
  	font-size: 1.5em;
  	margin: 2% 0 0 70%;
  	color: #64C367;
  }
  .flex-col {
    display: flex;
    flex-direction: column;
  }
  .flex-row {
    display: flex;
    flex-direction: row;
  }
</style>
